<template>
    <Mask :model-value="show" style="z-index: 9999">
      <div class="content">
        <div class="title">{{title}}</div>
        <div class="body">
          <slot></slot>
        </div>

        <div class="flex align-center justify-center btns">
          <div class="btn" v-if="props.showClose" @click="bindClose">取消</div>
          <div class="btn submit" @click="bindSubmit">确定</div>
        </div>
      </div>
    </Mask>
</template>

<script setup lang="ts">
import Mask from "./Mask";
import {ref} from "vue";

const props = defineProps({
  title: String,
  showClose: Boolean
})

const show = ref(false)
const bindClose = () => {
  show.value = false
}

const emit = defineEmits(['submit'])
const bindSubmit = () => {
  show.value = true
  emit('submit')
}

const showModel = () => {
  show.value = true
}

defineExpose({
  showModel
})

</script>

<style scoped lang="scss">
  .content {
    width: 686rpx;
    //height: 284rpx;
    background: linear-gradient(135deg, #FFFFFF 0%, #F0FFFF 100%);
    box-shadow: 0px 8rpx 24rpx 6rpx rgba(0,0,0,0.08);
    border-radius: 24rpx;
    padding: 32rpx 0;
    margin: 0 auto;
    .title {
      height: 36rpx;
      font-size: 26rpx;
      font-weight: 500;
      color: #0D3333;
      line-height: 36rpx;
      text-align: center;
    }
    .body {
      padding: 30rpx 0;
      text-align: center;
      font-size: 24rpx;
      font-weight: 400;
      color: #0D3333;
    }
    .btns {
      gap: 72rpx;
      .btn {
        width: 144rpx;
        height: 44rpx;
        background: rgba(13, 51, 51, 0.08);
        border-radius: 16rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #0D3333;
        line-height: 44rpx;
        text-align: center;
      }
      .submit {
        background: rgba(36, 250, 246, 1);
      }
    }
  }
</style>
